<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>题目搜索</title>
  <link rel="icon" href="image/网页图标.png" type="image/x-icon">

  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
  <script src="js/top.js"></script>

  <style>
    *{
      padding: 0;
      margin: 0;
    }
    html, body, #app {
      width: 100%;
      height: 100%;
      font-size: 14px;
    }
    .el-container{
      width: 100%;
      height: 100%;
    }
    .el-header{
      width: 100%;
      padding: 0%;
    }

    /* 卡片 */
    .c1{
      width: 100%;
      height: 100%;
      font-size: 35px;
    }

    /* 弹出 */
    .d1{
      width: 200px;
      height: 400px;
      position: absolute;
      z-index: 100;
      left: 10%;
    }

    /* 浮动 */
    .f{
      float: left;
    }

    .i1{
      position: relative;
      top: -15px;
    }

    .p1{
      margin: 8px 10px 0 10px;
      text-decoration: none;
      color: #333333;
    }
    .user{
      float: right;
      position: relative;
      left: -40px;
      top: 15px;
    }
    .top1{
      width: 100%;
      height: 10%;
      font-size: 20px;
      background-color: #DCDFE6;
      display: flex;
      align-items: center; /* 可选，用于垂直居中 */
      justify-content: center; /* 水平居中 */
    }
    .t1 > p{
      margin-right: 6px;
    }
    .t22{
      margin-left: 20%;
      display: flex;
      align-items: center; /* 可选，用于垂直居中 */
    }
    .down1{
      width: 100%;
      height: 120%;
    }
    .o1{
      position: relative;
      left: 20px;
      top: 20px;
    }
    .grid3{
      display: grid;
      grid-template-columns: auto auto auto;
    }
    .el-form-item{
      margin-block: 10px 0px;
      padding-inline: 10px;
    }
    .el-switch{
      align-self: center
    }
  </style>

</head>
<body>

<div id="app">
  <el-container>
    <!-- 头部 -->
    <el-header height="12%">
      <top @getuser="user">
      </top>
    </el-header>
    <!-- 身体 -->
    <el-main>
      <!--      头部- 类别名，总题/已刷题/未刷题数量，分类，搜索，开始刷题-->
      <div class="top1">
        <div class="t22 f">
          <el-input v-model="search.input" placeholder="请输入内容"></el-input>
          <el-button type="primary" plain @click="getdata">搜索</el-button>
        </div>
        <!--          上传题库-->
        <div class="t22 f">
          <el-button type="primary" plain @click="upquestion">上传题目</el-button>
        </div>
      </div>

      <div class="down1">
        <el-card>
          <div v-for="q in questionPage" class="flex" @click="open(q)">
            <div>
              <el-tag>{{q.type}}</el-tag>
              <span v-if="q.content.length>100">{{q.content.substring(0,100)}}...</span>
              <span v-else>{{q.content}}</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-main>
  </el-container>

  <!--    弹窗-->
  <!--    选择随机题目弹框-->
  <el-dialog title="题目详情" :visible.sync="qus">
    <!--        题目显示-->
    <div v-if="one.type == '填空题'">
      {{one.content}}
    </div>
    <div v-if="one.type == '单选题' || one.type == '多选题'">
      {{one.content}}
      <ol type="A" class="o1">
        <li v-for="a in one.items.split(';')"><input type="checkbox" disabled>{{a.replace(/^\$/, '')}}</li>
      </ol>
    </div>
    <div v-if="one.type == '判断题'">
      {{one.content}}
      <ol type="A" class="o1">
        <li><input type="checkbox" disabled>对</li>
        <li><input type="checkbox" disabled>错</li>
      </ol>
    </div>
    <div v-if="one.type == '问答题'">
      {{one.content}}
    </div>
    <div class="input-container" style="margin-top: 30px">
      <el-input v-model="submitComment" placeholder="请输入错题提交意见"></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="qus = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()">错题提交</el-button>
    </div>
  </el-dialog>

<!--  新增题目-->
  <el-dialog title="题目信息" :visible.sync="showEditor">
    <el-form>
      <el-form-item label="题型" :label-width="100">
        <el-select placeholder="请选择题型" v-model="questionOne.type" @change="clean">
          <el-option label="填空题" value="填空题"></el-option>
          <el-option label="单选题" value="单选题"></el-option>
          <el-option label="多选题" value="多选题"></el-option>
          <el-option label="判断题" value="判断题"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程" :label-width="100">
        <el-select placeholder="请选择课程" v-model="questionOne.course">
          <el-option v-for="t in type" :label="t.tname" :value="t.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目" :label-width="100">
        <el-input autocomplete="off" type="textarea" style="width: 90%" v-model="questionOne.content"></el-input>
      </el-form-item>

<!--      图片-->
      <el-upload
              class="upload-demo"
              action="cloud-other/review/upload"
              :on-change="handleChange"
              :file-list="fileList"
              :auto-upload="true"
              :on-success="upyes"
              :on-error="upno"
              list-type="picture"
              :limit="1">
        <i slot="trigger" class="el-icon-plus"></i>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" width="30%">
        <img :src="dialogImageUrl" style="width: 100%; display: block;" alt="预览图">
      </el-dialog>

      <!--选项-->
      <el-form-item label="选项" :label-width="100" v-if="questionOne.type === '单选题' || questionOne.type === '多选题'">
        <div class="grid3" style="grid-template-columns: auto 20px 50px">
          <el-input autocomplete="off" style="width: 90%" v-model="items.item1">
          </el-input>A
          <el-switch active-color="#13ce66" inactive-color="#999" v-model="select.item1"></el-switch>

          <el-input autocomplete="off" style="width: 90%" v-model="items.item2">
          </el-input>B
          <el-switch active-color="#13ce66" inactive-color="#999" v-model="select.item2"></el-switch>

          <el-input autocomplete="off" style="width: 90%" v-model="items.item3">
          </el-input>C
          <el-switch active-color="#13ce66" inactive-color="#999" v-model="select.item3"></el-switch>

          <el-input autocomplete="off" style="width: 90%" v-model="items.item4">
          </el-input>D
          <el-switch active-color="#13ce66" inactive-color="#999" v-model="select.item4"></el-switch>
        </div>
      </el-form-item>

      <!--            判断题-->
      <el-form-item label="选项" :label-width="100" v-else-if="questionOne.type === '判断题'">
        <span>错误<el-switch active-color="#13ce66" inactive-color="#999" v-model="select.item1"></el-switch>正确</span>
      </el-form-item>

      <!--            填空题-->
      <el-form-item label="选项" :label-width="100" v-else>
        <input type="text" placeholder="答案;号隔开" v-model="questionOne.items">
      </el-form-item>

      <el-form-item label="解题思路" :label-width="100">
        <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="questionOne.ideas">
        </el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showEditor = false">取 消</el-button>
      <el-button type="primary" @click="addQuestion">提 交</el-button>
    </div>
  </el-dialog>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      search:{input: ''},
      questionPage: {},
      qus: false,
      one: {},
      showEditor: false,
      questionOne:{type:'', content:'', course:'', items:'', ideas:''},
      items:{item1:"", item2:"", item3:"", item4:""},
      select:{item1:false, item2:false, item3:false, item4:false},
      str:'',
      type: '',    //题目类别
      fileList: [], // 存储已选择的文件列表
      dialogImageUrl: '',
      dialogVisible: false,
      pic:'',
      submitComment: '', // 存储用户输入的提交意见
      uid: null
    },
    created() {
      this.getType();
    },
    methods: {
      //组件自定义方法
      user(info) {
        this.uid = info.id;
      },
      //搜索
      getdata(){
        axios.get("cloud-other/question/queryAll",{
          params:{
            input: this.search.input
          }
        }).then(res=>{
          this.questionPage = res.data.data;
        })
      },
      open(obj){
        this.qus = true;
        this.one = obj;
        this.submitComment = '';
      },
      //清空答案
      clean(){
        this.items={item1:"", item2:"", item3:"", item4:""},
        this.select={item1:false, item2:false, item3:false, item4:false}
      },
      //上传题库
      upquestion(){
        //将值清空
        this.questionOne = {type:'', content:'', course:'', items:'', image: ''};
        this.items = {item1:"", item2:"", item3:"", item4:""};
        this.select = {item1:false, item2:false, item3:false, item4:false};
        this.fileList = [];
        this.pic = "";
        this.showEditor = true;
      },
      //新增题目
      addQuestion(){
        if(this.fileList.length > 0){
          //有图片
          this.questionOne.image = this.pic;
        }else{
          this.questionOne.image = '';
        }
        if(this.questionOne.type != "填空题"){
          this.questionOne.items = "";
          }
        //整和答案
        if(this.questionOne.type.endsWith("选题")){
          //选择题答案合计
          for (let name in this.select) {
            if(this.items[name] != "" && this.str == ""){
              this.items[name] = this.items[name].replace(/^\$/, '');
            }
            if(this.select[name]){
              //选中加$
              this.items[name] = "$" + this.items[name];
            }
            this.questionOne.items += this.items[name] + ";";
          }
          this.questionOne.items = this.questionOne.items.slice(0, -1);
        }else if(this.questionOne.type === "判断题"){
          if(this.select.item1){
            this.questionOne.items = "true";
          }else{
            this.questionOne.items = "false";
          }
        }

        var jwt = sessionStorage.getItem("jwt");
        // 设置请求头
        const config = {
          headers: {
            'Authorization': `${jwt}`
          }
        };
        axios.post("cloud-other/review/addQuestion", this.questionOne, config).then(res=>{
          if(res.data.code == 0){
            let a = "";
            res.data.data.forEach(err=>{
              a += err.defaultMessage;
            });
            this.$alert(a);
            this.str = a;
            for (let i = 0; i < Object.keys(this.items).length; i++) {
              let key = `item${i + 1}`;
              this.items[key] = this.items[key].replace(/^\$/, '');
            }
          }else {
            this.$alert(res.data.msg);
            this.str = "";
            this.fileList = [];
            this.pic = "";
            this.showEditor = false;
          }
        });
      },
      //获取全部类别
      getType(){
        axios.get("cloud-other/type/getType").then(res=>{
          if(res.data.code == 1){
            this.type = res.data.data;
          }
        });
      },
      // 文件上传
      handleChange(file, fileList) {
        // 如果已经选择了文件，则不再允许添加新的文件
        this.fileList = fileList;
        if (this.fileList.length > 1) {
          this.$message.error('只能上传一张图片！');
          // 可以选择移除多余的文件
          this.fileList.splice(1);
        }
        // 如果文件列表中有文件，显示预览
        if (this.fileList.length > 0) {
          this.dialogImageUrl = this.fileList[0].raw ? URL.createObjectURL(this.fileList[0].raw) : this.fileList[0].url;
          this.dialogVisible = true;
        }
      },
      handleRemove(file, fileList) {
        // 移除文件并关闭预览
        this.fileList = fileList.filter(f => f.name !== file.name);
        this.pic = "";
        this.dialogVisible = false;
      },
      //文件上传成功
      upyes(response){
        this.pic = response.data;
      },
      //失败
      upno(err){
        alert("抱歉，请重新上传！");
      },
      //错题提交
      handleSubmit(){
        if(this.submitComment === ''){
          this.$alert("输入为空！");
          return;
        }
        axios.get("cloud-other/wrong/handleSubmit", {
          params: {
            uid: this.uid,
            qid: this.one.id,
            content: this.submitComment,
          }
        }).then(res=>{
          if(res.data.code === 1){
            this.$message(res.data.msg);
          }else{
            this.$alert(res.data.msg);
          }
        });
      }
    }
  });
</script>

</body>
</html>